<template>
  <div class="box">
    <Head @todoItem="todoItem" />
    <List :todo="todo" :changeIsCompleted="changeIsCompleted" />
    <Footer :todo="todo" :checkAll="checkAll" />
  </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs, provide } from "vue";
import Head from "./components/Head.vue";
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";
import { Todo } from "./types/todo";
export default defineComponent({
  setup() {
    const state = reactive<{ todo: Todo[] }>({
      todo: [
        {
          id: 11,
          name: "奔驰",
          isCompleted: false,
        },
        {
          id: 22,
          name: "宝马",
          isCompleted: true,
        },
        {
          id: 33,
          name: "奥迪",
          isCompleted: true,
        },
      ],
    });
    const todoItem = (v: Todo) => {
      state.todo.unshift(v);
    };
    const deleteItem = (index: number) => {
      console.log(index);

      state.todo.splice(index, 1);
    };
    provide("deleteItem", deleteItem);
    const changeIsCompleted = (item: Todo, isCompleted: boolean) => {
      item.isCompleted = isCompleted;
    };
    const checkAll = () => {
      return state.todo.findIndex((v) => v.isCompleted != false) == -1;
    };

    return {
      ...toRefs(state),
      todoItem,
      changeIsCompleted,
      checkAll,
    };
  },
  components: { Head, List, Footer },
});
</script>
<style scoped>
.box {
  width: 300px;
  height: 400px;
  border: 3px solid #eee;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>
